<template>
  <div>
    <el-button type="success" @click="show=true">{{ title }}</el-button>
    <el-dialog title="导出设置" v-model="show" :append-to-body="true">
      每页显示数&nbsp;<el-input-number :min="1" v-model="size"></el-input-number>
      &nbsp;&nbsp;
      页&nbsp;<el-input-number :min="1" v-model="page"  ></el-input-number>
      <el-button @click="writeExcel" type="primary" style="margin-left:10px">确定</el-button>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import http from '@/http';
import { ref, watch } from 'vue';
import * as XLSX from 'xlsx';
const props = defineProps({
  filters: {
    type: Object as any,  //  请求参数
  },
  link: {
    type: String,
    required: true // 接口连接
  },
  headers: {
    type: Array<string>
  },
  title: {
    type: String,
    default:'导出'
  }
})

const page = ref(1) // 当前页数
const size = ref(10) // 一页数量
const show = ref(false)
const localFilters = ref(props.filters)
watch(props, () => {
  localFilters.value = props.filters
})
const writeExcel = () => {
  const filters = localFilters.value? localFilters.value:{}
  http.fetchGet(props.link, Object.assign(filters, { page: page.value, size: size.value })).then((res: any) => {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(res.data.list as any[]);
    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    const excelFileName = `${new Date().getTime()}.xlsx`;
    XLSX.writeFile(workbook, excelFileName);
    show.value = false
  })
}
</script>